<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="sub/defaultHeader.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/lib/jquery-1.7.js"></script>
<script type="text/javascript" src="/js/lib/jquery-ui-1.8.16.custom.js"></script>
<script type="text/javascript" src="/js2/compact/common.js"></script>

<style type="text/css">

/* Popup Layer */
.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:10000;}
.open {display:block;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}

.layer_area {position:absolute; left:50%; top:50%; background:#fff; padding:20px; border:4px solid #ddd;}
</style>

</head>
<body>
<div style="margin:30px;"><span class="button medium"><a href="#" id="layer_open">팝업창 열기</a></span></div>

<div class="layer">
	<div class="bg"></div>
	<div class="layer_area" id="layer1"><p style="width:400px; text-align:justify; font-family:Malgun gothic;">이 것은 팝업창입니다. 뜨는 레이어의 크기에 상관없이 항상 가운데 오게 작업하였습니다. 도큐먼트보다 클 경우에는 좌측/상단에 고정되게 하였습니다.</p><br /><span class="button medium"><a href="#" id="layer_close">팝업창 닫기</a></span></div>
</div>


<script type="text/javascript">
jQuery(function($){
	function layer_open(el){
		//$('.layer').addClass('open');
		$('.layer').show();
		var temp = $('#' + el);
		if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
		else temp.css('top', '0px');
		if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
		else temp.css('left', '0px');
	}
	$('#layer_open').click(function(){
		layer_open('layer1'); /* 열고자 하는 것의 아이디를 입력 */
		return false;
	});
	$('#layer_close').click(function(){
		$('.layer').hide();
		return false;
	});
	$(document).ready(function(){
	});
});






$(document).ready(function() {
	var layerPopup = new LayerPopup();
	layerPopup.openLayer('dialog');
});

</script>
<div class="lay_rtime _guide_lay_floating_banner" id="dialog" style="top:0;left:0; display:none;">
	<div class="lay_rtime_inner">

		<img src="http://static.naver.net/maps2/lay_realbus_3.jpg" width="673" height="426" alt="" class="img_blind">

		<div class="act">
			<input type="checkbox" id="rtimeLabel2 ip_lay_check_floating_banner">
			<label for="rtimeLabel2 ip_lay_check_floating_banner">이 창을 다시 표시 안 함</label>
			<a href="#" class="btn_close lay_close"><img src="http://static.naver.net/maps2/btn_close9.gif" width="15" height="14" alt="닫기"></a>
		</div>
	</div>
</div>
</body>
</html>